<template>
  <div class="list-echarts two last">
    <img class="twotopimg" src="../../assets/images/twotop-1.png" alt="">
    <div class="ltitle">课时费情况</div>
    <!-- <div class="top">
      <div :class="['tab',actvietoplist==index?'stuactive':'']" v-for="(item,index) in toplist" @click="toplistclick(index)">{{item}}</div>
    </div> -->
    <div style="margin-right: 0 auto;background-color: #ffb900;position: relative;" class="blo one">
      <el-date-picker
        :editable="false"
        v-model="time[0]"
        @change="timefun()"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="开始日期">
      </el-date-picker>
      <div style="background-color: #ffb900;display: flex;align-items: center;justify-content: center;color: white;">一</div>
      <el-date-picker
        style="margin-left: 10px;width: 220px!important;"
        v-model="time[1]"
        :editable="false"
        @change="timefun()"
        value-format="yyyy-MM-dd"
        type="date"
        placeholder="结束日期">
      </el-date-picker>
      <div style="width: 0;height: 0;border: 7px solid transparent;border-top: 7px solid white;position: absolute;right: 20px;top: 15px;"></div>
    </div>
    <div style="margin-top: 25px;padding-bottom: 25px;width: 350px;margin-left: 57px;">
      <div class="zlie">
        <div style="width: 40%;justify-content: flex-start;">机构名称</div>
        <div>总额(元)</div>
        <div>服务人次</div>
        <div>报价区间（元）</div>
      </div>
      <div style="min-height: 190px;">
        <div class="zlielist" v-for="(item,index) in list" :key="index">
          <div style="width: 40%;justify-content: flex-start;">{{item.name}}</div>
          <div>{{item.money}}</div>
          <div>{{item.count}}</div>
          <div>{{item.min}}-{{item.max}}</div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: flex-end;border-bottom: 1px dashed #50759f;border-top: 1px dashed #50759f;">
      <div class="pagination page" style="width: 405px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="8"
          :page-count="page_count">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { classpost } from '@/api/user.js'
  export default {
    name: 'classhour',
    components: {},
    props: ["qyvalue"],
    data() {
      return {
        time: [],
        toplist: ['周','月','学期','学年'],
        page: 1,
        limit: 8,
        page_count: 0,
        list: [],
        actvietoplist: 0
      }
    },
    computed: {},
    watch: {
      qyvalue:{
        deep:true,
        immediate: true,
        handler(newVal,oldVal){
          if (newVal!='') {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var bfmonth = date.getMonth();
            var nowdata = date.getDate();
            var time = []
            var now = year+'-'+month+'-'+nowdata
            var bfnow = year+'-'+bfmonth+'-'+nowdata
            time.push(bfnow)
            time.push(now)
            this.time = time
            this.classpostfun()
          }
        }
      }
    },
    created() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var bfmonth = date.getMonth();
      var nowdata = date.getDate();
      var time = []
      var now = year+'-'+month+'-'+nowdata
      var bfnow = year+'-'+bfmonth+'-'+nowdata
      time.push(bfnow)
      time.push(now)
      this.time = time
    },
    mounted() {
    },
    methods: {
      classpostfun() {
        var that = this,
        params = {
          page: this.page,
          limit: this.limit,
          school_area_id: this.qyvalue,
          // date_period: this.actvietoplist+1
          start_date: '',
          end_date: ''
        }
        if (this.time!='') {
          params.start_date = this.time[0]
          params.end_date = this.time[1]
        }
        classpost(params).then(res => {
          this.page_count = res.data.page_count
          this.list = res.data.data
        })
      },
      toplistclick(e) {
        this.actvietoplist = e
        this.classpostfun()
      },
      handleSizeChange() {
        this.page = val
        this.classpostfun()
      },
      handleCurrentChange(val) {
        this.page = val
        this.classpostfun()
      },
      timefun() {
        this.classpostfun()
      },
    }
  }
</script>
<style scoped lang="less">
  .two{
    position: relative;
    margin-top: 25px;
    // padding-right: 20px;
    box-sizing: border-box;
    .top{
      height: 40px;
      width: 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 60px;
      box-sizing: border-box;
      .stud{
        font-size: 18px;
        font-weight: 600;
        color: white;
        margin-right: 30px;
        cursor:pointer;
      }
      .tab{
        font-size: 13px;
        color: white;
        width: 40px;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .tab:hover{
        cursor:pointer;
      }
      .stuactive{
        background: linear-gradient(to right,#ff8e00,#ffab00,#ffb500);
        border-radius: 5Px;
        font-weight: bold;
      }
    }
    .twotopimg{
      position: absolute;
      left: -10px;
      top: 0;
    }
    .ltitle{
      position: absolute;
      left: 0px;
      top: 0;
      font-size: 18px;
      color: white;
      font-weight: bold;
      writing-mode:vertical-lr;
      letter-spacing: 4px;
    }
    .imbox{
      img{
        width: 90px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 40px;
      }
      div{
        width: 93px;
        position: absolute;
        top: 60px;
        left: 40px;
      }
    }
    .zlie{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background: linear-gradient(to bottom,#004678,#006d99,#0082ab);
      color: white;
      border-radius: 5px;
      padding: 10px;
      font-size: 12px;
      font-weight: bold;
      div{
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zlielist{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #79d6e2;
      border-radius: 2px;
      padding: 10px;
      font-size: 12px;
      font-weight: bold;
      position: relative;
      div{
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .zlielist::after {
      content: "";
      display: block;
      width: 350px;
      height: 7px;
      background: url(../../assets/images/threetop-2.png) no-repeat;
      background-size: 350px 7px;
      bottom: 0;
      left: 0;
      position: absolute;
    }
    .pagination{
      padding: 10px 0;
    }
    .blo{
      display: flex;
      width: 350px;
      margin: 0 auto;
      border-radius: 5px;
      overflow: hidden;
    }
  }
</style>
